import log from '@/components/log.vue';
<template>
  <div class="page-container">
    <div class="header">
      <div class="btnGroup">
        <button class="leftButton">
          <img src="../../assets/return.png" alt="" />
        </button>
        <div class="line"></div>
        <button class="back-button">
          <img src="../../assets/index.png" alt="" />
        </button>
      </div>

      <div class="title">探索</div>
    </div>
    <div class="content">
      <!-- 人工客服 -->
      <div class="personalKf" @click="toKf">
        <div class="leftPart">
          <h3>人工客服</h3>
          <p>用我真诚 <span> | </span> 换您满意</p>
        </div>
        <div class="rightPart">
          <div class="fontBox">1</div>
          <div class="btnGo">
            <img src="../../assets/右箭头.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 定制键盘 -->
      <div class="personalKl">
        <div class="leftPart" @click="detailKf">
          <h3>定制键盘</h3>
          <p>尽享独特<span>|</span>满足所有遐想~</p>
          <div class="tag">尽享3D</div>
          <div class="btnBox">立即定制</div>
        </div>
        <div class="rightPart">
          <div class="jpPic">
            <img
              src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/image/20230906/20230906105406892186.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <!-- 天梯图 -->
      <div class="personalKf">
        <div class="leftPart">
          <h3>天梯图</h3>
          <p>最新电脑性能排行榜</p>
        </div>
        <div class="rightPart">
          <div class="carousel-container">
            <div class="carousel-track" ref="carouselTrack">
              <img
                v-for="(item, index) in ept"
                :key="index"
                class="carousel-slide"
                :src="item"
                alt=""
              />
            </div>
          </div>
          <div class="btnGo">
            <img src="../../assets/右箭头.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 视频教程 -->
      <div class="personalKf" @click="gopersondetail">
        <div class="leftPart">
          <h3>视频教程</h3>
          <p>主机到手了如何操作？教程看这里</p>
        </div>
        <div class="rightPart">
          <div class="lastPic">
            <img
              src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/newversion/fps.png"
              alt=""
            />
          </div>

          <div class="btnGo">
            <img src="../../assets/右箭头.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 显卡验真 -->
      <div class="personalKf">
        <div class="leftPart">
          <h3>显卡验真</h3>
          <p>维护玩家权益 官方全新验证</p>
        </div>
        <div class="rightPart">
          <div class="lastPic">
            <img
              src="https://mloongbld.obs.cn-north-4.myhuaweicloud.com/newversion/gpu.png"
              alt=""
            />
          </div>

          <div class="btnGo">
            <img src="../../assets/右箭头.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <btn1></btn1>
  </div>
</template>
<script>
import btn1 from "../../components/botButton.vue";
export default {
  components: {
    btn1,
  },
  data() {
    return {
      ept: [
        "https://mloongbld.obs.cn-north-4.myhuaweicloud.com/newversion/amd2.png",
        "https://mloongbld.obs.cn-north-4.myhuaweicloud.com/newversion/intel1.png",
      ],
      currentIndex: 0,
      isTimerRunning: false,
      timer: null,
    };
  },
  methods: {
    gopersondetail() {
      this.$router.push("/persondetail").catch((err) => err);
    },
    startAutoSlide() {
      this.isTimerRunning = true;
      this.timer = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.ept.length;
        this.updateCarousel();
      }, 3000); // 每3秒切换一次
    },
    detailKf() {
      this.$router.push("/keyboard");
    },
    updateCarousel() {
      const track = this.$refs.carouselTrack;
      const slideWidth = 40;

      track.style.transform = `translateX(-${
        this.currentIndex * slideWidth
      }px)`;
    },
    toggleTimer() {
      this.isTimerRunning = !this.isTimerRunning;
      this.startAutoSlide();
    },
    toKf() {
      this.$router.push("/detailKf");
      clearInterval(() => {
        this.flag = false;
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  mounted() {
    this.startAutoSlide();
  },
};
</script>
<style lang="scss" scoped>
body {
  padding: 0;
  margin: 0;
}

page-container {
  font-family: Arial, sans-serif;
  background-color: #a2a1a1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding: 0.1rem 0.2rem;
  padding-top: 0.06rem;
  // background-color: #07c160;
  color: #000;
  font-size: 0.3rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;

  .btnGroup {
    display: flex;
    justify-content: space-between;

    .line {
      width: 0.03rem;
      height: 0.4rem;
      background-color: #ccc;
      line-height: 0.4rem;
      margin-top: 0.14rem;
    }

    .back-button {
      background: none;
      padding: 0;
      margin: 0;
      border: none;
      color: white;
      font-size: 24px;
      cursor: pointer;
      margin-bottom: 0.09rem;

      img {
        margin-top: 0.1rem;
        width: 0.5rem;
        height: 0.5rem;
        margin-left: 0.16rem;
      }
    }

    .leftButton {
      background: none;
      padding-bottom: 0;
      margin: 0;
      border: none;
      color: white;
      // font-size: 24px;
      cursor: pointer;

      img {
        // margin-top: 0.1rem;
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 0.1rem;
        margin-bottom: 0.05rem;
      }
    }
  }

  .title {
    flex-grow: 1;
    text-align: center;
    padding-right: 1.2rem;
  }
}

.content {
  flex-grow: 1;
  padding: 0.5rem 0.3rem 10rem 0.38rem;
  margin: 0;
  background-color: #f4f4f4;
  height: 100%;

  .personalKf {
    margin-bottom: 0.3rem;
    padding: 0 0.4rem 0 0.3rem;
    width: 6.7rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.2rem;
    height: 1.5rem;

    // line-height: 1.6rem;
    .leftPart {
      margin-top: 0.3rem;
      margin-bottom: 0.2rem;

      h3 {
        margin-bottom: 0.01rem;
        font-size: 0.3rem;
        font-weight: 700;
      }

      p {
        margin-top: 0.03rem;
        color: #808490;
      }

      .tag {
        width: 1rem;
        height: 0.4rem;
        color: red;
        line-height: 0.4rem;
        font-size: 0.24rem;
        background-color: #ffeee9;
        text-align: center;
        margin-bottom: 0.14rem;
        padding: 0.04rem;
        border-radius: 0.06rem;
      }

      .btnBox {
        width: 1.4rem;
        height: 0.5rem;
        background-color: #000;
        text-align: center;
        border-radius: 0.3rem;
        padding: 0 0.04rem 0 0.04rem;
        line-height: 0.5rem;
        color: #fff;
        margin-top: 0.1rem;
      }
    }

    .rightPart {
      display: flex;

      .lastPic {
        margin-top: 0.34rem;

        img {
          width: 0.8rem;
          height: 0.8rem;
        }
      }

      .carousel-container {
        margin-top: 0.34rem;
        margin-right: 0.01rem;
        width: 0.8rem;
        overflow: hidden;
        position: relative;

        .carousel-track {
          display: flex;
          transition: transform 0.5s ease-in-out;

          .carousel-slide {
            min-width: 100%;
            height: 0.8rem;
            box-sizing: border-box;
            border: 1px solid #fff;
          }
        }
      }

      .fontBox {
        width: 0.3rem;
        height: 0.3rem;
        text-align: center;
        line-height: 0.3rem;
        background-color: red;
        border-radius: 50%;
        color: #fff;
        margin-top: 0.64rem;
      }

      .jpPic {
        padding-top: 0.1rem;

        img {
          width: 2.8rem;
          height: 2.3rem;
        }
      }

      .btnGo {
        padding-top: 0.6rem;

        img {
          width: 0.3rem;
          height: 0.3rem;
        }
      }
    }
  }

  .personalKl {
    margin-bottom: 0.3rem;
    padding: 0 0.4rem 0 0.3rem;
    width: 6.7rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.2rem;
    height: 2.8rem;

    // line-height: 1.6rem;
    .leftPart {
      margin-top: 0.36rem;
      margin-bottom: 0.2rem;

      h3 {
        margin-bottom: 0.01rem;
        font-size: 0.3rem;
        font-weight: 700;
      }

      p {
        margin-top: 0.03rem;
        margin-bottom: 0.1rem;
        color: #808490;
      }

      .tag {
        width: 1rem;
        height: 0.4rem;
        color: red;
        line-height: 0.4rem;
        font-size: 0.24rem;
        background-color: #ffeee9;
        text-align: center;
        margin-bottom: 0.14rem;
        padding: 0.04rem;
        border-radius: 0.06rem;
      }

      .btnBox {
        width: 1.4rem;
        height: 0.5rem;
        background-color: #000;
        text-align: center;
        border-radius: 0.3rem;
        padding: 0 0.04rem 0 0.04rem;
        line-height: 0.5rem;
        color: #fff;
        margin-top: 0.1rem;
      }
    }

    .rightPart {
      display: flex;

      .lastPic {
        margin-top: 0.34rem;

        img {
          width: 0.8rem;
          height: 0.8rem;
        }
      }

      .carousel-container {
        margin-top: 0.34rem;
        margin-right: 0.01rem;
        width: 0.8rem;
        overflow: hidden;
        position: relative;

        .carousel-track {
          display: flex;
          transition: transform 0.5s ease-in-out;

          .carousel-slide {
            min-width: 100%;
            height: 0.8rem;
            box-sizing: border-box;
            border: 1px solid #fff;
          }
        }
      }

      .fontBox {
        width: 0.3rem;
        height: 0.3rem;
        text-align: center;
        line-height: 0.3rem;
        background-color: red;
        border-radius: 50%;
        color: #fff;
        margin-top: 0.6rem;
      }

      .jpPic {
        padding-top: 0.1rem;
        margin-left: 0.3rem;

        img {
          width: 2.8rem;
          // margin-left: 0.3rem;
          height: 2.3rem;
        }
      }

      .btnGo {
        padding-top: 0.6rem;

        img {
          width: 0.3rem;
          height: 0.3rem;
        }
      }
    }
  }
}
</style>
